<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 

<style>

#example1 {
	border: 2px solid #a1a1a1;
	padding: 10px 40px;
	background:#dddddd;
	width: 300px;
	border-radius: 25px;
}

#example2 {
  border: 2px solid red;
  padding: 10px;
  border-radius: 50px 20px;
}

#borderRadiusExample1 {
	border: 2px solid #a1a1a1;
	padding: 10px 40px;
	background:#dddddd;
	width: 300px;
	border-radius: 25px 0px 0px 0px;
}

#borderRadiusExample2 {
	border: 2px solid #a1a1a1;
	padding: 10px 40px;
	background:#dddddd;
	width: 300px;
	border-radius: 0px 25px 0px 0px;
}

#borderRadiusExample3 {
	border: 2px solid #a1a1a1;
	padding: 10px 40px;
	background:#dddddd;
	width: 300px;
	border-radius: 0px 0px 25px 0px;
}

#borderRadiusExample4 {
	border: 2px solid #a1a1a1;
	padding: 10px 40px;
	background:#dddddd;
	width: 300px;
	border-radius: 0px 0px 0px 25px;
}

#borderRadiusExample5 {
	border: 2px solid #a1a1a1;
	padding: 10px 40px;
	background:#dddddd;
	width: 300px;
	border-radius: 10px;
}

#borderRadiusExample6 {
	border: 2px solid #a1a1a1;
	padding: 10px 40px;
	background:#dddddd;
	width: 300px;
	border-radius: 10px 20px;
}

#borderRadiusExample7 {
	border: 2px solid #a1a1a1;
	padding: 10px 40px;
	background:#dddddd;
	width: 300px;
	border-radius: 10px 20px 30px;
}


#borderTopLeftRadiusExample {
	border: 2px solid #a1a1a1;
	padding: 10px 40px;
	background:#dddddd;
	width: 300px;
	border-top-left-radius: 20px;
}

#borderTopRightRadiusExample {
	border: 2px solid #a1a1a1;
	padding: 10px 40px;
	background:#dddddd;
	width: 300px;
	border-top-right-radius: 20px;
}

#borderBottomRightRadiusExample {
	border: 2px solid #a1a1a1;
	padding: 10px 40px;
	background:#dddddd;
	width: 300px;
	border-bottom-right-radius: 20px;
}

#borderBottomLeftRadiusExample {
	border: 2px solid #a1a1a1;
	padding: 10px 40px;
	background:#dddddd;
	width: 300px;
	border-bottom-left-radius: 20px;
}

#borderRadiusEllipseExample1 {
	border: 2px solid #a1a1a1;
	padding: 10px 40px;
	background:#dddddd;
	width: 300px;
	border-radius: 50px/15px;
}

#borderRadiusEllipseExample2 {
	border: 2px solid #a1a1a1;
	padding: 10px 40px;
	background:#dddddd;
	width: 300px;
	border-radius: 15px/50px;
}

#borderRadiusEllipseExample3 {
	border: 2px solid #a1a1a1;
	padding: 10px 40px;
	background:#dddddd;
	width: 300px;
	border-radius: 50%;
}

</style>
</head>
<body>
<!-- 
	border-radius: 1-4 length|% / 1-4 length|%;
	按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。
	
	四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
	三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
	两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
	一个值： 四个圆角值相同
	
-->
<div id="example1">
	<p>border-radius 属性允许您为元素添加圆角边框！</p>
</div>
<br><br>

<div id="example2">
  <p>如果设置了两个值，第一个用于左上角和右下角，第二个用于右上角和左下角。</p>
</div>
<br><br>

<div id="borderRadiusExample1">
	<p>左上角设置圆角！border-radius: 25px 0px 0px 0px;</p>
</div>
<br><br>

<div id="borderRadiusExample2">
	<p>右上角设置圆角！border-radius: 0px 25px 0px 0px;</p>
</div>
<br><br>

<div id="borderRadiusExample3">
	<p>右下角设置圆角！border-radius: 0px 0px 25px 0px;</p>
</div>
<br><br>

<div id="borderRadiusExample4">
	<p>左下角设置圆角！border-radius: 0px 0px 0px 25px;</p>
</div>
<br><br>


<div id="borderRadiusExample5">
	<p>仅左上角设置圆角，则其他三个角也是要同样半径的圆角！border-radius: 10px;</p>
</div>
<br><br>

<div id="borderRadiusExample6">
	<p>仅左上角、右上角设置圆角，则左下角的半径与右上角相同、右下角的半径与左上角相同！border-radius: 10px 20px;</p>
</div>
<br><br>

<div id="borderRadiusExample7">
	<p>仅左上角、右上角、右下角设置圆角，则左下角的半径与右上角相同！border-radius: 10px 20px 30px;</p>
</div>
<br><br>

<div id="borderTopLeftRadiusExample">
	<p>左上角设置圆角！border-top-left-radius: 20px;</p>
</div>
<br><br>

<div id="borderTopRightRadiusExample">
	<p>右上角设置圆角！border-top-right-radius: 20px;</p>
</div>
<br><br>

<div id="borderBottomRightRadiusExample">
	<p>右下角设置圆角！border-bottom-right-radius: 20px;</p>
</div>
<br><br>

<div id="borderBottomLeftRadiusExample">
	<p>左下角设置圆角！border-bottom-left-radius: 20px;</p>
</div>
<br><br>

<div id="borderRadiusEllipseExample1">
	<p>椭圆边角！border-radius: 50px/15px;</p>
</div>
<br><br>

<div id="borderRadiusEllipseExample2">
	<p>椭圆边角！border-radius: 15px/50px;</p>
</div>
<br><br>

<div id="borderRadiusEllipseExample3">
	<p>椭圆边角！border-radius: 50%;</p>
</div>
<br><br>

</body>
</html>